<template>
  <div id="configModification">
    <el-form ref="configMessage" :model="form.data" label-width="260px" label-position="left" :inline="true">
      <el-form-item
        label="会话激活超时时间"
        label-width="260px"
        prop="server_session_activation_timeout_seconds"
        :rules="server_session_activation_timeout_seconds_rules"
      >
        <el-input v-model.number="form.data.server_session_activation_timeout_seconds" placeholder="单位：秒" />
      </el-form-item>
      <el-form-item
        label="应用最大会话数"
        label-width="260px"
        prop="max_concurrent_server_sessions_per_process"
        :rules="max_concurrent_server_sessions_per_process_rules"
      >
        <el-input v-model.number="form.data.max_concurrent_server_sessions_per_process" />
      </el-form-item>
    </el-form>
    <div class="label">应用进程启动配置：</div>
    <el-form ref="configMessage" :model="form.data" label-width="260px" label-position="top">
      <div class="configurationContent" v-for="(item, index) in form.data.process_configurations" :key="index">
        <el-icon :class="form.data.process_configurations!.length > 1 ? 'minus' : 'none'" @click="minusconfig(index)"><Close /></el-icon>
        <div class="formcol1">
          <el-form-item label="启动路径" :prop="'process_configurations.' + index + '.launch_path'" :rules="configuration_rules.launch_path">
            <el-input v-model="item.launch_path" maxlength="1024" />
          </el-form-item>
        </div>
        <div class="formcol2">
          <el-form-item label="启动参数" :prop="'process_configurations.' + index + '.parameters'">
            <el-input v-model="item.parameters" maxlength="1024" />
          </el-form-item>
          <el-form-item
            label="并发启动数量"
            :prop="'process_configurations.' + index + '.concurrent_executions'"
            :rules="configuration_rules.concurrent_executions"
          >
            <el-input v-model.number="item.concurrent_executions" />
          </el-form-item>
        </div></div
    ></el-form>
    <div class="add">
      <el-button class="btn button" @click="addconfig">+&nbsp;新增栏</el-button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  #configModification {
    .el-form-item {
      margin-bottom: 20px;
    }
    .el-input {
      width: 240px;
      font-size: 12px;
    }
    .label {
      margin-top: 8px;
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: bold;
      color: #252b3a;
    }
    .configurationContent {
      height: 170px;
      background: #ffffff;
      border: 1px solid #e0e2e9;
      border-radius: 2px;
      margin-bottom: 20px;
      padding: 24px 20px 6px 20px;
      .none {
        display: none;
      }
      .minus {
        float: right;
        cursor: pointer;
      }
      .formcol1 {
        .el-input {
          width: 480px;
          font-size: 12px;
        }
      }
      .formcol2 {
        display: flex;
        justify-content: space-between;
        .el-input {
          width: 210px;
          font-size: 12px;
        }
        .el-form-item:nth-child(1) {
          margin-bottom: 20px;
          margin-right: 20px;
        }
      }
    }
    .button {
      width: 100px;
      height: 28px;
    }
  }
</style>
<script lang="ts" setup>
  import appStore from '@/store'
  import Vue, { onMounted, ref, reactive, watch } from 'vue'
  import { ElMessage, FormInstance, FormItemRule, FormRules } from 'element-plus'
  import FleetsService, { FleetConfigMsg, UpdateFleetRuntimeConfigurationRequest } from '@/api/fleetsService'
  import fleetDetails, { ProcessParamType } from '@/api/fleetDetails'
  import { ElMessageBox } from 'element-plus'

  const configMessage = ref<FormInstance>()

  let formData: UpdateFleetRuntimeConfigurationRequest = reactive({
    server_session_activation_timeout_seconds: 600,
    max_concurrent_server_sessions_per_process: 50,
    process_configurations: [Object()]
  })

  let form = reactive({
    data: formData
  })

  const emits = defineEmits(['close', 'get'])
  const props = defineProps(['fleetId'])
  let fleet_id = props.fleetId

  watch(
    () => props.fleetId,
    (newValue, oldValue) => {
      fleet_id = newValue
    }
  )

  const getFleet: ProcessParamType = {
    project_id: appStore.userStore.project_id,
    fleet_id: fleet_id
  }

  const submitForm: FleetConfigMsg = {
    project_id: appStore.userStore.project_id,
    fleet_id: fleet_id,
    UpdateFleetRuntimeConfigurationRequestBody: form.data
  }

  const minusconfig = (index: number) => {
    if (form.data.process_configurations!.length < 2) return
    form.data.process_configurations!.splice(index, 1)
  }

  const addconfig = () => {
    if (form.data.process_configurations!.length > 49) return
    form.data.process_configurations!.push({
      launch_path: '',
      parameters: '',
      concurrent_executions: 1
    })
  }

  const server_session_activation_timeout_seconds_rules: FormItemRule[] = [
    { required: true, type: 'number', min: 1, max: 600, message: '请输入1-600范围内的数字', trigger: 'blur' }
  ]

  const max_concurrent_server_sessions_per_process_rules: FormItemRule[] = [
    { required: true, type: 'number', min: 1, max: 50, message: '请输入1-50范围内的数字', trigger: 'blur' }
  ]

  const configuration_rules = reactive<FormRules>({
    launch_path: [{ required: true, message: '请输入启动路径', trigger: 'blur' }],
    concurrent_executions: [{ required: true, type: 'number', min: 1, max: 50, message: '请输入1-50范围内的数字', trigger: 'blur' }]
  })

  const getFleetRuntimeConfiguration = async () => {
    let res = await fleetDetails.getRunTiem(getFleet)
    form.data.server_session_activation_timeout_seconds = res.data.runtime_configuration.server_session_activation_timeout_seconds
    form.data.max_concurrent_server_sessions_per_process = res.data.runtime_configuration.max_concurrent_server_sessions_per_process
    form.data.process_configurations = res.data.runtime_configuration.process_configurations
  }
  const submit = async () => {
    let res = await FleetsService.updateConfig(submitForm)
    if (res.status === 204) {
      ElMessage({
        message: '修改成功！',
        type: 'success'
      })
      emits('get')
      emits('close')
    }
  }
  const onSubmit = async () => {
    var configMessageValid = await configMessage.value?.validate((valid) => {
      return valid
    })
    if (configMessageValid) {
      ElMessageBox.confirm('请确定保存修改吗？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          submit()
        })
        .catch(() => {})
    }
  }

  defineExpose({ onSubmit })
  getFleetRuntimeConfiguration()
</script>
